<template>
	<view class="zc">
		  <text class="back-btn iconfont icon-close" @click="uni.navigateBack({
		  	delta:1
		  })"></text>
		  <view class="jb"></view>
		  <view class="main">
		  	  <view class="z">
		  	  	 注册
		  	  </view>
			  <input type="text" @blur="name()" v-model="zcquery.username" class="in" placeholder="请输入用户名"/>
			   <input type="text" @blur="pwd()" v-model="zcquery.password"  class="in"  placeholder="请输入密码"/>
			    <input type="text"  @blur="qr()" v-model="zcquery.repassword"  class="in" placeholder="请输入确认密码"/>
			     <view class="zcb" @click="reg">
			     	注册
			     </view>
				 <view class="goto" @click="goto">
				 	去登录
				 </view>
		  </view>
	</view>
</template>

<script>
	import api from '@/api/api.js'
	export default{
		data(){
			return{
				zcquery:{
					username:'',
					password:'',
					repassword:'',
				}
					
				
			}
		},
		methods:{
			name(){//用户名校验
				let arr=/^[a-z0-9]{3,9}$/
				if(!arr.test(this.zcquery.username)){
					uni.showToast({
						title:"格式错误",
						duration:1500,
						icon:'error'
					})
				}
			},
			pwd(){//密码校验
				let arr=/^[a-z0-9]{3,9}$/
				if(!arr.test(this.zcquery.password)){
					uni.showToast({
						title:"格式错误",
						duration:1500,
						icon:'error'
					})
				}
			},
			qr(){
				if(this.zcquery.password!=this.zcquery.repassword){
					uni.showToast({
						title:"密码不一致",
						duration:1500,
						icon:'error'
					})
				}
			},
			async reg(){//点击注册
				let res=await api.getreg(this.zcquery)
				console.log(res)
				if(res.code==20000){
					uni.showToast({
						title:"注册成功",
					})
				}
			},
		goto(){//去登录
			console.log(111)
			uni.navigateTo({
				url:'login'
			})
		},
	}
	}
	
</script>

<style>
	.zc{
		width: 100%;
		height: 100%;
	}
	.main{
		width: 100%;
		height:500rpx;
		background-color: white;
		border-top-left-radius:30rpx ;
	     border-top-right-radius:30rpx ;
		 margin-top: -25rpx;
		} 
	.goto{
		color: #5ccc84;
		margin-left:40rpx;
		font-size: 30rpx;
	}
	.zcb{
		width: 700rpx;
		height: 100rpx;
		border-radius: 6rpx;
		margin-left: 25rpx;
		margin-top: 20rpx;
		background-color: #5ccc84;
		text-align: center;
		line-height: 100rpx;
		color: white;
		font-size: 40rpx;
	}
	.in{
	background-color: lightgray;
	width: 700rpx;
	height: 100rpx;
	border-radius: 6rpx;
	margin-left: 25rpx;
	margin-top: 20rpx;
	}
	.z{
		  font-size: 50rpx;
		  width: 100%;
		  height: 170rpx;
		  line-height: 170rpx;
		  margin-left: 20rpx;
		 }
	.jb{
		width: 100%;
		height: 317rpx;
		background-image: linear-gradient(to right, #42f8b7, #65dee4);
	}
</style>